<template>
  <div class="employee-crud">
    <a-button  v-if="!$route.query.id" type="primary" @click="showModal('add')" class="mb-4">
      新增
    </a-button>
    <a-table :columns="columns" :data-source="dataSource" :rowKey="record => record.id">
      <template slot="action" slot-scope="text, record">
        <a-space>
          <a-button type="link" @click="showModal('edit', record)">编辑</a-button>
          <a-popconfirm
            title="确定删除这条记录吗？"
            ok-text="是"
            cancel-text="否"
            @confirm="handleDelete(record.id)"
            :pagination="pagination"
            @change="handleTableChange"
          >
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <a-modal
      :title="modalMode === 'add' ? '新增' : '编辑'"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form-model :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" ref="form" :model="formData" :rules="rules">
        <a-form-model-item label="姓名" prop="name">
          <a-input v-model="formData.name" />
        </a-form-model-item>
<!--        <a-form-model-item label="账号" prop="legalCode">
          <a-input v-model="formData.legalCode" />
        </a-form-model-item>-->
        <a-form-model-item label="分管业务及部门" prop="dept">
          <a-input v-model="formData.dept" />
        </a-form-model-item>
        <a-form-model-item label="职务" prop="position">
          <a-input v-model="formData.position" />
        </a-form-model-item>
        <a-form-model-item label="联系方式" prop="tel">
          <a-input v-model="formData.tel" />
        </a-form-model-item>
<!--        <a-form-model-item label="状态" prop="state">
          <a-select v-model="formData.state">
            <a-select-option value="0">添加</a-select-option>
            <a-select-option value="1">通过</a-select-option>
            <a-select-option value="2">驳回</a-select-option>
          </a-select>
        </a-form-model-item>-->
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { deleteAction } from '@/api/manage'
export default {
  data() {
    return {
      columns: [
        { title: 'ID', dataIndex: 'id', key: 'id' },
        { title: '姓名', dataIndex: 'name', key: 'name' },
        // { title: '账号', dataIndex: 'legalCode', key: 'legalCode' },
        { title: '分管业务及部门', dataIndex: 'dept', key: 'dept' },
        { title: '职务', dataIndex: 'position', key: 'position' },
        { title: '联系方式', dataIndex: 'tel', key: 'tel' },
        {
          title: '状态',
          dataIndex: 'state',
          key: 'state',
          customRender: text => {
            const stateMap = { '0': '添加', '1': '通过', '2': '驳回' }
            return stateMap[text] || text
          },
        },
        /*{
          title: '删除状态',
          dataIndex: 'delFlag',
          key: 'delFlag',
          customRender: text => {
            return text === '0' ? '正常' : '已删除'
          },
        },*/
        { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } },
      ],
      dataSource: [],
      modalVisible: false,
      modalMode: 'add',
      formData: {
        name: '',
        legalCode: '',
        dept: '',
        position: '',
        tel: '',
        state: '0',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        // legalCode: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        dept: [{ required: true, message: '请输入分管业务及部门', trigger: 'blur' }],
        position: [{ required: true, message: '请输入职务', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        // state: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
    }
  },
  mounted() {
    this.fetchData()
  },
  props: {
    user: {
      type: Object,
    },
  },
  methods: {
    handleTableChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.fetchData()
    },
    async fetchData() {
      this.$http
        .get('/register/agencyLegalCharge/list', {
          params: { legalCode: this.user.legalCode,pageNo: this.pagination.current, pageSize: this.pagination.pageSize },
        })
        .then(r => {
          this.dataSource = r.result.records
          this.pagination.total = r.result.total
        })
    },
    showModal(mode, record = null) {
      this.modalMode = mode
      this.modalVisible = true
      if (mode === 'edit' && record) {
        this.formData = { ...record }
      } else {
        this.formData = {
          name: '',
          legalCode: '',
          dept: '',
          position: '',
          tel: '',
          state: '0',
        }
      }
    },
    handleModalOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.modalMode === 'add') {
            this.handleAdd()
          } else {
            this.handleEdit()
          }
        }
      })
    },
    handleModalCancel() {
      this.modalVisible = false
      this.$refs.form.resetFields()
    },
    handleAdd() {
      // 模拟API调用
      const newRecord = {
        ...this.formData,
        legalCode: this.user.legalCode,
      }
      this.$http.post('/register/agencyLegalCharge/add', newRecord).then(r => {
        this.fetchData()
        this.modalVisible = false
        this.$message.success('添加成功')
      })
    },
    handleEdit() {
      const newRecord = {
        ...this.formData,
        legalCode: this.user.legalCode,
      }
      // 模拟API调用
      this.$http.post('/register/agencyLegalCharge/edit', newRecord).then(r => {
        this.modalVisible = false
        this.$message.success('编辑成功')
        this.fetchData()
      })
    },
    handleDelete(id) {
      // 模拟API调用
      deleteAction('/register/agencyLegalCharge/delete', { id }).then(r => {
        this.fetchData()
        this.$message.success('删除成功')
      })
    },
  },
}
</script>

<style scoped>
.employee-crud {
  padding: 24px;
}

.mb-4 {
  margin-bottom: 16px;
}
</style>
